<template>
  <div class="Big">
    <el-backtop :right='20' :bottom='400'>
      <!-- 加个标签 -->
      回到顶部
    </el-backtop>
    <i class="el-icon-back" @click="$router.back()"></i>
    <div style="width:1000px">
      <el-card :body-style="{ padding: '0px'}">
        <div class="pic">
          <div style="position:relative">
            <el-image
              v-if="listDetail&&listDetail.coverImgUrl&&listDetail.coverImgUrl!==undefined"
              style="width:300px;height:300px;vertical-align:middle;"
              :src="listDetail&&listDetail.coverImgUrl" fit="cover"></el-image>
            <div class="like" @click="like('musicList',listDetail)">收藏</div>
          </div>
          <div
            :style="`text-align:left;white-space:pre-wrap;margin-left:30px;overflow:scroll;overflow-x:hidden;width:670px;height:300px`">
            <h1 style="margin-top:10px;">歌单名字：{{listDetail.name}}</h1>
            <h3 style="margin-bottom:10px;margin-top:30px">歌单介绍:</h3>
            {{listDetail&&listDetail.description}}
          </div>
        </div>

        <div class="songClass" @click="PlayMusic(val)"
          v-for="(val,ind) in playList" :key="ind">
          <span class="over_ellipsis" style="width:50%">
            <span style="margin-right:10px">{{ind+1}}</span>{{val.name}}
          </span>
          <!-- 歌曲名字 -->
          <span v-ChangeTime>{{val.dt}}</span>
          <!-- 歌曲时间 -->
          <span class="icon">
            <i class="el-icon-video-play icon_content"></i>
            <i class="el-icon-download icon_content"
              @click.stop="download(val.id)"></i>
            <i class="el-icon-star-off icon_content"
              @click.stop='like("music",val)'></i>
          </span>
          <span class="over_ellipsis" style="width:20%">
            <span class="artClass" v-for="(val2,ind2) in val.ar" :key="ind2"
              @click="$router.push({ name: 'singer', query: { id: val2.id } })">{{val2.name}}</span>
          </span>

          <!-- 专辑  -->
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { MusicDetails, PlayMusic } from '../../api/Play'
// 歌曲详情
import { musicAllList, musicListDetail } from '../../api/Home'
// 歌单所有歌曲,歌单详情
import download from '../../../node_modules/downloadjs/download.js'
export default {
  name: '',
  data () {
    return {
      Id: JSON.parse(this.$route.query.val),
      // 歌单id
      playList: [],
      // 歌单音乐
      listDetail: {}
      // 歌单详情
    };
  },
  async created () {
    // if (Boolean(sessionStorage.getItem('musicList')) == false) {
    //   console.log('第一次进入，需要储存');
    //   sessionStorage.setItem('musicList', JSON.stringify(this.Id))
    //   // 储存在本地存储里 
    // }
    // if (this.Id == undefined) {
    //   this.Id = JSON.parse(sessionStorage.getItem('musicList'))
    // }
    // 上面的方法只适用于最后一个页面
    let res = await musicAllList({ id: this.Id.id })
    this.playList = res.data.songs
    let res2 = await musicListDetail({ id: this.Id.id })
    this.listDetail = res2.data.playlist
  },
  beforeDestroy () {
    // sessionStorage.removeItem('musicList')
  },
  destroyed () { },
  methods: {
    download (id) {
      // 下载
      PlayMusic({ id: id }).then((res) => {
        // 播放之前检查一下能不能播
        if (res.data.data[0].url == null || Math.floor(res.data.data[0].time / 1000) / 60 < 1) return this.ErrorAlert('歌曲无法下载')
        // 若没有url或音乐时间小于60秒则判定为无法播放
        download(res.data.data[0].url)
      }).catch((err) => {
        this.ErrorAlert('下载失败')
      })
    },
    PlayMusic (val) {
      PlayMusic({ id: val.id }).then((res) => {
        // 播放之前检查一下能不能播
        if (res.data.data[0].url == null || Math.floor(res.data.data[0].time / 1000) / 60 < 1) return this.ErrorAlert('歌曲无法播放')
        // 若没有url或音乐时间小于60秒则判定为无法播放
        this.$router.push({ name: 'play', query: { val: JSON.stringify(val), url: JSON.stringify(res.data.data[0].url) } })
        // 由于传参无法传复杂数据类型,所以先转化为字符串
      }).catch((err) => {
        console.log(err);
      })
    },
    like (type, val) {
      let local = JSON.parse(localStorage.getItem('UserInfoList'))[type]
      if (Boolean(local.find((val2) => val2.id == val.id))) {
        return this.ErrorAlert('已收藏过')
      }
      if (type == 'music') {
        this.$store.dispatch('Change', ['music', {
          id: val.id,
          title: val.name,
          name: val.ar,
          dt: val.dt
        }])
        this.ErrorAlert('收藏歌曲成功', 'success')
      }
      if (type == 'musicList') {
        this.$store.dispatch('Change', ['musicList', {
          id: val.id,
          title: val.name,
          listNum: (val.playCount / 10000).toFixed(1)
        }])
        this.ErrorAlert('收藏歌单成功', 'success')
      }
    },
    ErrorAlert (mes, ty = 'error') {
      // 错误提示
      return this.$message({
        message: mes,
        duration: 700,
        type: ty
      });
    },
  },
  components: {},

  props: {},

  watch: {},

  computed: {},

}

</script>
<style scoped>
.el-backtop {
  /* 美化一下回到顶部按钮 */
  z-index: 0;
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(255, 255, 255, 0.5);
  background-color: black;
  width: 50px;
  height: 200px;
  border-radius: 10px;
}
.over_ellipsis {
  /* 超出省略 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.Big {
  margin: 0 auto;
  margin-top: 10px;
  width: 1000px;
  display: flex;
  flex-direction: row;
}
.like {
  position: absolute;
  width: 100px;
  height: 50px;
  line-height: 50px;
  font-size: 30px;
  border-radius: 25px;
  z-index: 2;
  right: 5px;
  bottom: 5px;
  background-color: rgba(0, 0, 0, 0.2);
  color: white;
}
.like:hover {
  color: red;
}
.pic {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin-bottom: 10px;
}
.songClass {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  text-align: left;
  cursor: pointer;
}
.songClass:nth-child(2n) {
  background-color: rgb(228, 228, 228);
}
.songClass:nth-child(2n) .icon {
  color: rgb(228, 228, 228);
}
.songClass:hover {
  background-color: black;
  color: white;
}
.icon {
  font-size: 20px;
  margin-right: 10px;
  color: white;
}
.icon_content:hover {
  color: red;
}
.el-icon-back {
  cursor: pointer;
  font-weight: bold;
  position: absolute;
  top: 10%;
  left: 10%;
  font-size: 50px;
}
.el-icon-back:hover {
  color: red;
}
.artClass {
  margin-right: 10px;
}
.artClass:hover {
  color: red;
}
</style>